<!DOCTYPE HTML>
<html>
<head th:replace="mgr/base/head :: head('文件管理')"></head>
<body>
	<nav th:replace="mgr/base/nav :: active('files')"></nav>
	<div id="page-wrapper" style="padding: 10px">
		<div class="container-fluid">
			<div class="row" th:if="${error != null}">
				<div class="col-md-12">
					<div class="alert alert-danger" th:if="${error != null}"
						th:text="${messages.getMessage(error)}"></div>
				</div>
			</div>
			<div id="main" th:if="${result != null}">
				<div class="row" style="margin-bottom: 10px">
					<div class="col-md-12">
						<button class="btn btn-primary" data-toggle="modal"
							data-target="#uploadModal">上传文件</button>
						<button class="btn btn-primary" data-toggle="modal"
							data-target="#createFolderModal">新建文件夹</button>
						<button class="btn btn-primary" data-toggle="modal"
							data-target="#queryModal">查询</button>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div th:remove="tag">
							<ol class="breadcrumb"
								th:unless="${#lists.isEmpty(result.paths)}">
								<li><a th:href="@{/mgr/file/index}">根目录</a></li>
								<li th:each="path : ${result.paths}"><a
									th:href="@{/mgr/file/index?parent=}+${path.id}"
									th:title="${path.path}" data-toggle="tooltip"
									th:text="${#strings.length(path.path) > 5  ? #strings.substring(path.path,0,5)+'...' : path.path}"></a>
								</li>
							</ol>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<form style="display: none" th:action="@{/mgr/file/index}"
							id="pageForm">
							<input type="hidden" th:if="${param.name != null}" th:value="${param.name}" name="name"/>
							<input type="hidden" th:if="${param.type != null}" th:value="${param.type}" name="type" id="pageFormType"/>
							<input type="hidden" th:if="${param.querySubDir != null}" th:value="${param.querySubDir}" name="querySubDir" id="pageFormSubDir"/>
							<input type="hidden" th:if="${param.parent != null}"
								th:value="${param.parent}" name="parent" /> <input
								type="hidden" th:value="${result.page.currentPage}"
								name="currentPage" />
						</form>
						<div class="alert alert-info"
							th:if="${#lists.isEmpty(result.page.datas)}">当前没有任何文件</div>
						<div th:remove="tag"
							th:unless="${#lists.isEmpty(result.page.datas)}">
							<div class="row">
								<div class="col-xs-6 col-md-2"
									th:each="file : ${result.page.datas}">
									<div th:switch="${file.type.name()}" th:remove="tag">
										<div th:case="DIRECTORY" class="thumbnail text-center">
											<a th:href="@{/mgr/file/index?parent=}+${file.id}"><img
												th:src="@{/static/fileicon/folder.png}"
												class="img-responsive" style="height: 80px" /></a>
											<div class="caption">
												<a th:title="${file.path}" data-toggle="tooltip"
													th:text="${#strings.length(file.path) > 5  ? #strings.substring(file.path,0,5)+'...' : file.path}"></a>
											</div>
											<div class="caption" style="height: 45px">
												<a style="margin-right: 5px" href="###"
													data-toggle="tooltip" title="删除" data-action="delete"
													th:data-id="${file.id}"><span
													class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
												<a style="margin-right: 5px" href="###"
													data-toggle="tooltip" title="属性" data-action="property"
													th:data-id="${file.id}"><span
													class="glyphicon glyphicon-cog" aria-hidden="true"></span></a>
											</div>
										</div>
										<div th:case="FILE" class="thumbnail text-center">
											<img th:src="${file.cf.thumbnailUrl.small}"
												th:if="${file.cf.thumbnailUrl != null}"
												class="img-responsive" style="height: 80px" /> <img
												th:src="@{/static/fileicon/file.png}" class="img-responsive"
												style="height: 80px" th:if="${file.cf.thumbnailUrl == null}" />
											<div class="caption">
												<a th:title="${file.path}" data-toggle="tooltip"
													th:text="${#strings.length(file.path) > 5  ? #strings.substring(file.path,0,5)+'...' : file.path}"></a>
											</div>
											<div class="caption" style="height: 45px">
												<a style="margin-right: 5px" href="###"
													data-toggle="tooltip" title="删除" data-action="delete"
													th:data-id="${file.id}"><span
													class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
												
												<a style="margin-right: 5px" href="###"
													data-toggle="tooltip" title="重命名" data-action="rename"
													th:data-id="${file.id}" th:data-ext="${file.cf.extension}"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></a>	
													
												<a style="margin-right: 5px" href="###"
													data-toggle="tooltip" title="复制" data-action="copy"
													th:data-id="${file.id}"><span
													class="glyphicon glyphicon-copy" aria-hidden="true"></span></a>

												<a style="margin-right: 5px" href="###"
													data-toggle="tooltip" title="移动" data-action="move"
													th:data-id="${file.id}" th:data-ext="${file.cf.extension}"><span class="glyphicon glyphicon-move"
													aria-hidden="true"></span></a> <a style="margin-right: 5px"
													th:href="${file.cf.url}" target="_blank"
													data-toggle="tooltip"
													title="查看文件，这跟文件和浏览器有关系，通常情况下，只能查看js,css,txt和图片等文件，其他文件会被当作文件下载。"><span
													class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span></a>
												<a href="###" data-toggle="tooltip" title="属性"
													data-action="property" th:data-id="${file.id}"><span
													class="glyphicon glyphicon-cog" aria-hidden="true"></span></a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div th:if="${result.page.totalPage > 1}">
							<ul class="pagination">
								<li
									th:each="i : ${#numbers.sequence(result.page.listbegin, result.page.listend-1)}">
									<a th:text="${i}" th:data-page="${i}" href="###"></a>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:replace="base/foot_source"></div>
	<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog"
		aria-labelledby="uploadModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="uploadModalLabel">文件上传</h4>
				</div>
				<div class="modal-body">
					<div class="container-fluid">
						<div class="row" style="padding: 5px">
							<form id="fileupload" class="form-horizontal" autocomplete="off"
								th:action="@{/mgr/file/upload?v=1}" method="POST"
								enctype="multipart/form-data">
								<div class="col-md-12" style="margin-bottom: 20px">
									<label class="control-label">存储服务：</label> <select
										class="form-control" name="store">
										<option th:each="store : ${stores}" th:value="${store.id()}"
											th:text="${store.name()}"></option>
									</select> <span th:remove="tag" th:if="${param.parent != null}"><input
										type="hidden" th:value="${param.parent}" name="parent"></span>
								</div>
								<div class="fileupload-buttonbar">
									<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
										<span class="btn btn-success fileinput-button"> <i
											class="glyphicon glyphicon-plus"></i> <span>添加文件</span> <input
											type="file" name="files" multiple="">
										</span>
										<button type="submit" class="btn btn-primary start">
											<i class="glyphicon glyphicon-upload"></i> <span>文件上传</span>
										</button>
										<button type="reset" class="btn btn-warning cancel">
											<i class="glyphicon glyphicon-ban-circle"></i> <span>取消</span>
										</button>
										<span class="fileupload-process"></span>
									</div>
								</div>
								<div style="margin-top: 10px">
									<div
										class="fileupload-progress fade col-lg-12 col-sm-12 col-md-12 col-xs-12">
										<!-- The global progress bar -->
										<div class="progress progress-striped active"
											role="progressbar" aria-valuemin="0" aria-valuemax="100">
											<div class="progress-bar progress-bar-success"
												style="width: 0%;"></div>
										</div>
									</div>
								</div>
								<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
									<div class="table-responsive">
										<table role="presentation" class="table table-striped"
											style="text-align: center">
											<tbody class="files"></tbody>
										</table>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="createFolderModal" tabindex="-1"
		role="dialog" aria-labelledby="createFolderModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="createFolderModalLabel">新文件夹</h4>
				</div>
				<div class="modal-body">
					<div class="tip"></div>
					<form autocomplete="off">
						<span th:remove="tag" th:if="${param.parent != null}"><input
							type="hidden" th:value="${param.parent}" name="parent"></span> <input
							type="hidden" value="DIRECTORY" class="form-control" name="type">
						<div class="form-group">
							<label for="name" class="control-label">路径(1~30个字符，只能包含大小写英文字符和数字，一旦创建将无法修改！):</label>
							<input type="text" class="form-control" name="path">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="createFolder">创建</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="copyModal" tabindex="-1" role="dialog"
		aria-labelledby="copyModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="copyModalLabel">复制文件</h4>
				</div>
				<div class="modal-body">
					<div class="tip"></div>
					<form autocomplete="off">
						<input type="hidden" class="form-control" name="id">
						<div class="input-group">
							<span class="input-group-addon">路径</span><input type="text"
								value="" class="form-control" name="path">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="copy">复制</button>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="renameModal" tabindex="-1" role="dialog"
		aria-labelledby="renameModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="renameModalLabel">重命名文件</h4>
				</div>
				<div class="modal-body">
					<div class="tip"></div>
					<form autocomplete="off">
						<input type="hidden" class="form-control" name="id"> 
						<div class="input-group" id="rename-path-container">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="rename">重命名</button>
				</div>
			</div>
		</div>
	</div>


	<div class="modal fade" id="moveModal" tabindex="-1" role="dialog"
		aria-labelledby="moveModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="moveModalLabel">移动文件</h4>
				</div>
				<div class="modal-body">
					<div class="tip"></div>
					<form autocomplete="off">
						<input type="hidden" class="form-control" name="id"> <input
							type="hidden" value="" class="form-control" name="type">
						<div class="input-group" id="move-path-container">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="move">移动</button>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="queryModal" tabindex="-1" role="dialog"
		aria-labelledby="queryModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="queryModalLabel">文件查询</h4>
				</div>
				<div class="modal-body">
					<div class="tip"></div>
					<form autocomplete="off">
						  <div class="form-group">
						    <label >文件名</label>
						    <input type="text" class="form-control" placeholder="" id="query-name" th:value="${param.name}">
						  </div>
						  <div class="form-group">
						    <label >文件类型</label>
						    <select class="form-control" id="query-type">
						    	<option value="">全部</option>
						    	<option value="DIRECTORY">文件夹</option>
						    	<option value="FILE">文件</option>
						    </select>
						  </div>
						  <div class="checkbox">
						    <label>
						      <input type="checkbox" id="query-sub"> 查询子文件夹
						    </label>
						  </div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="query">查询</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript"
		th:src="@{/static/jquery-file-upload/js/load-image.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/js/canvas-to-blob.min.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/vendor/jquery.ui.widget.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.iframe-transport.js}"></script>
	<script th:src="@{/static/jquery-file-upload/js/jquery.fileupload.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-ui.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-process.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-image.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-audio.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-video.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-validate.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/mgr/file.js}"></script>
</body>
</html>
